Shadow in React Native 原來有這門學問。
在專案中，遇到卡牌的陰影問題，以為可以使用 css3 中的 box-shadow 屬性，結果發現設定後，沒效果啊～！接著又發現雙平台的顯示竟然沒有統一，所以31天接續紀錄一下，就是寫這篇的原因了~ :P

Platform

首先你要先知道，react native 有個很平易近人的跨平台裝置判斷，請看下面這篇：
[ 卡卡 DAY 8 ] - React Native 跨平台裝置判斷

當學會判斷平台之後...，以下就知道是怎麼一回事了

import {
  StyleSheet,
  Platform
} from 'react-native';



const styles = StyleSheet.create({
  cardShadow: {
    ...Platform.select({
      ios: {
        // ios style
      },
      android: {
        // android style
      }
    })
  },
});

style 實作

iOS

    shadowColor: '#aaa',  
    // 陰影的顏色
    shadowOffset:{width:0,height:0},  
    // xy軸為基準，設定陰影的偏移，width = x軸,height ＝ y軸
    shadowOpacity: 1,
    // 陰影的透明度
    shadowRadius: 1.5,  
    // 設置陰影暈染半徑

android

    elevation:1.5,
    // 支援 android5.0 以上
    // 無法指定陰影的顏色以及偏移，只能設陰影高度，陰影效果主要在底部
    // elevation 是只有 Android-only style property 使用在 View elements

code

import {
  StyleSheet,
  Platform
} from 'react-native';

//.....code....//

const styles = StyleSheet.create({
  cardShadow: {
    ...Platform.select({
      ios: {
        shadowColor: '#aaa',  
        shadowOffset:{width:0,height:0},  
        shadowOpacity: 1,
        shadowRadius: 1.5,  
      },
      android: {
         elevation:1.5,
      }
    })
  },
});

結論

結果...你會發現，其實兩個裝置的樣式寫法根本就不一樣，所以不需要做平台判斷直接合併寫即可。

import {
  StyleSheet
} from 'react-native';

//.....code....//

const styles = StyleSheet.create({
  cardShadow: {
    shadowColor: '#aaa',  
    shadowOffset:{width:0,height:0},  
    shadowOpacity: 1,
    shadowRadius: 1.5,  
    elevation:1.5,
  },
});